<template>
    <div class="settle-container">
        <div class="content-wrapper">
            <div class="header-section">
                <h2 class="page-title">
                    <i class="el-icon-shopping-bag-1"></i>
                    确认订单
                </h2>
                <p class="page-subtitle">最后一步，确认你的订单信息</p>
            </div>
            
            <!-- 收货地址 -->
            <div class="section-card">
                <div class="section-header">
                    <h3><i class="el-icon-location"></i>收货地址</h3>
                </div>
                <div class="address-content" v-if="address.length > 0">
                    <div class="address-item" v-for="res in address" :key="res.id">
                        <el-radio v-model="form.address" :label="res.id" class="address-radio">
                            <div class="address-info">
                                <div class="address-details">
                                    <span class="location">{{ res.province_name }} {{ res.city_name }} {{ res.district_name }} {{ res.place }}</span>
                                    <div class="contact">
                                        <span class="receiver">{{ res.receiver }}</span>
                                        <span class="mobile">{{ res.mobile }}</span>
                                    </div>
                                </div>
                            </div>
                        </el-radio>
                    </div>
                </div>
                <div class="empty-address" v-else>
                    <el-empty description="暂无收货地址" :image-size="100" />
                    <el-button type="primary" @click="goToAddress">添加收货地址</el-button>
                </div>
            </div>
            
            <!-- 支付方式 -->
            <div class="section-card">
                <div class="section-header">
                    <h3><i class="el-icon-credit-card"></i>支付方式</h3>
                </div>
                <div class="payment-methods">
                    <el-radio v-model="form.pay_method" label="1" class="payment-radio">
                        <div class="payment-option">
                            <i class="el-icon-wallet"></i>
                            <span>支付宝</span>
                        </div>
                    </el-radio>
                    <el-radio v-model="form.pay_method" label="2" class="payment-radio">
                        <div class="payment-option">
                            <i class="el-icon-money"></i>
                            <span>货到付款</span>
                        </div>
                    </el-radio>
                </div>
            </div>
            
            <!-- 商品列表 -->
            <div class="section-card">
                <div class="section-header">
                    <h3><i class="el-icon-goods"></i>商品清单</h3>
                </div>
                <div class="products-list" v-if="carts.length > 0">
                    <div class="product-item" v-for="cart in carts" :key="cart.id">
                        <div class="product-image">
                            <img :src="'/api/' + cart.commodityDetail.commodityimg_set[0].src" />
                        </div>
                        <div class="product-info">
                            <h4 class="product-name">{{ cart.commodityDetail.name }}</h4>
                            <p class="product-caption">{{ cart.commodityDetail.caption }}</p>
                        </div>
                        <div class="product-price">
                            <span class="unit-price">￥{{ cart.commodityDetail.price }}</span>
                            <span class="quantity">×{{ cart.number }}</span>
                        </div>
                        <div class="product-total">
                            ￥{{ (cart.commodityDetail.price * cart.number).toFixed(2) }}
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 订单总计 -->
            <div class="section-card total-section">
                <div class="total-info">
                    <div class="total-item">
                        <span>商品总数：</span>
                        <span class="highlight">{{ count }} 件</span>
                    </div>
                    <div class="total-item">
                        <span>商品总额：</span>
                        <span class="highlight">￥{{ money }}</span>
                    </div>
                    <div class="total-item">
                        <span>运费：</span>
                        <span class="highlight">免运费</span>
                    </div>
                    <div class="total-item final-total">
                        <span>应付总额：</span>
                        <span class="final-price">￥{{ money }}</span>
                    </div>
                </div>
                <div class="submit-section">
                    <el-button 
                        type="primary" 
                        size="large" 
                        @click="addOrder"
                        :loading="isSubmitting"
                        class="submit-btn"
                    >
                        <i class="el-icon-check"></i>
                        提交订单
                    </el-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { getCartDetail, createOrder } from '@/api/shopping'
import { getAddress } from '@/api/user'
import { useRoute, useRouter } from "vue-router"
import { ElMessage } from 'element-plus'

const route = useRoute()
const router = useRouter()

const address = ref([])
const carts = ref([])
const isSubmitting = ref(false)

// 获取收货地址
getAddress().then((data) => {
    address.value = data
})

// 获取购物车详情
if (route.query.items) {
    const itemIds = route.query.items.split(',')
    itemIds.forEach(id => {
        getCartDetail(id).then(
            data => {
                carts.value.push(data)
            },
            error => {
                console.log('获取购物车详情失败', error.message)
            }
        )
    })
}

const form = ref({
    address: null,
    pay_method: "1",
    cart: route.query.items ? route.query.items.split(',') : []
})

// 提交订单
function addOrder() {
    if (!form.value.address) {
        ElMessage.error('请选择收货地址')
        return
    }
    if (!form.value.pay_method) {
        ElMessage.error('请选择支付方式')
        return
    }
    
    isSubmitting.value = true
    createOrder(form.value).then(
        data => {
            ElMessage.success('订单提交成功')
            router.push('/user/order')
        },
        error => {
            console.log('提交订单失败', error.message)
            ElMessage.error('提交订单失败')
        }
    ).finally(() => {
        isSubmitting.value = false
    })
}

// 跳转到地址管理
const goToAddress = () => {
    router.push('/user/address')
}

// 计算总数量
const count = computed(() => {
    return carts.value.reduce((total, cart) => total + cart.number, 0)
})

// 计算总金额
const money = computed(() => {
    return carts.value.reduce((total, cart) => {
        return total + (cart.number * cart.commodityDetail.price)
    }, 0).toFixed(2)
})
</script>

<style lang="less" scoped>
.settle-container {
    min-height: 100vh;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 20px;
}

.content-wrapper {
    max-width: 1000px;
    margin: 0 auto;
}

.header-section {
    text-align: center;
    margin-bottom: 30px;
    color: white;
    
    .page-title {
        font-size: 28px;
        font-weight: 700;
        margin-bottom: 8px;
        
        i {
            margin-right: 10px;
        }
    }
    
    .page-subtitle {
        font-size: 16px;
        opacity: 0.9;
        margin: 0;
    }
}

.section-card {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    margin-bottom: 20px;
    padding: 25px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    
    .section-header {
        margin-bottom: 20px;
        padding-bottom: 15px;
        border-bottom: 2px solid rgba(102, 126, 234, 0.1);
        
        h3 {
            font-size: 18px;
            color: #333;
            margin: 0;
            
            i {
                margin-right: 8px;
                color: #667eea;
            }
        }
    }
}

.address-content {
    .address-item {
        margin-bottom: 15px;
        
        .address-radio {
            width: 100%;
            
            :deep(.el-radio__label) {
                width: 100%;
                padding-left: 10px;
            }
            
            .address-info {
                .address-details {
                    .location {
                        font-size: 16px;
                        color: #333;
                        font-weight: 500;
                        display: block;
                        margin-bottom: 8px;
                    }
                    
                    .contact {
                        display: flex;
                        gap: 20px;
                        
                        .receiver {
                            color: #666;
                            font-weight: 500;
                        }
                        
                        .mobile {
                            color: #999;
                        }
                    }
                }
            }
        }
    }
}

.payment-methods {
    display: flex;
    gap: 30px;
    
    .payment-radio {
        .payment-option {
            display: flex;
            align-items: center;
            
            i {
                margin-right: 8px;
                font-size: 16px;
                color: #667eea;
            }
        }
    }
}

.products-list {
    .product-item {
        display: flex;
        align-items: center;
        padding: 15px 0;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        
        &:last-child {
            border-bottom: none;
        }
        
        .product-image {
            width: 80px;
            height: 80px;
            border-radius: 8px;
            overflow: hidden;
            margin-right: 15px;
            
            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }
        
        .product-info {
            flex: 1;
            
            .product-name {
                font-size: 16px;
                color: #333;
                margin: 0 0 5px 0;
            }
            
            .product-caption {
                font-size: 14px;
                color: #666;
                margin: 0;
            }
        }
        
        .product-price {
            text-align: right;
            margin-right: 20px;
            
            .unit-price {
                display: block;
                font-size: 14px;
                color: #666;
            }
            
            .quantity {
                font-size: 12px;
                color: #999;
            }
        }
        
        .product-total {
            font-size: 18px;
            font-weight: 600;
            color: #ff4757;
            min-width: 100px;
            text-align: right;
        }
    }
}

.total-section {
    .total-info {
        .total-item {
            display: flex;
            justify-content: space-between;
            margin-bottom: 15px;
            font-size: 16px;
            
            .highlight {
                color: #667eea;
                font-weight: 600;
            }
            
            &.final-total {
                border-top: 2px solid rgba(102, 126, 234, 0.1);
                padding-top: 15px;
                font-size: 20px;
                font-weight: 600;
                
                .final-price {
                    color: #ff4757;
                    font-size: 24px;
                }
            }
        }
    }
    
    .submit-section {
        text-align: center;
        margin-top: 30px;
        
        .submit-btn {
            background: linear-gradient(45deg, #667eea, #764ba2);
            border: none;
            border-radius: 25px;
            padding: 15px 40px;
            font-size: 18px;
            font-weight: 600;
            
            &:hover {
                transform: translateY(-2px);
                box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
            }
        }
    }
}

.empty-address {
    text-align: center;
    padding: 30px;
}

// 响应式设计
@media (max-width: 768px) {
    .settle-container {
        padding: 10px;
    }
    
    .section-card {
        padding: 15px;
    }
    
    .products-list .product-item {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
        
        .product-image {
            margin-bottom: 10px;
        }
        
        .product-price, .product-total {
            margin-right: 0;
            text-align: left;
        }
    }
    
    .payment-methods {
        flex-direction: column;
        gap: 15px;
    }
}
</style> 